<template>
    <div class="openOrder">
        <!-- 顶部查询表单 -->
        <div class="openOrderTop">
            <el-form
                ref="searchForm"
                :model="searchForm"
                :rules="feeDialogRules"
                :inline="true"
                size="mini"
            >
                <el-form-item label="账单号：" prop="billNum">
                    <el-input v-model="searchForm.billNum" clearable></el-input>
                </el-form-item>
                <el-form-item label="支付人：" prop="payPeople">
                    <el-select v-model="searchForm.payPeople" filterable clearable>
                        <el-option
                            v-for="item in payPeopleList"
                            :key="item.chbPaycstId"
                            :label="item.chbPayer"
                            :value="item.chbPaycstId"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" plain size="mini" @click="searchBtn">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="openOrderBox">
            <div class="openOrderLeft">
                <div class="openLeftTitle">账单列表</div>
                <!-- 按钮组 -->
                <div class="openLeftBtnBox">
                    <el-button type="success" plain size="mini" @click="openManage">开账管理</el-button>
                    <el-button type="danger" plain size="mini" @click="delOpen">取消开账</el-button>
                    <!-- <el-button type="primary" plain size="mini" @click="printBill">账单打印</el-button> -->
                </div>
                <!-- 左侧 账单列表 表格 -->
                <div class="openLeftTableBox">
                    <el-table
                        :data="billTableData"
                        border
                        :height="billTableHeight"
                        :header-cell-style="{ textAlign: 'center' }"
                        highlight-current-row
                        @row-click="getBillCurrent"
                    >
                        <el-table-column type="index" align="center" label=" " width="50"></el-table-column>
                        <el-table-column
                            prop="chbBillNo"
                            label="账单号"
                            width="120px"
                            show-overflow-tooltip
                            sortable
                        ></el-table-column>
                        <el-table-column prop="chbPayer" label="支付人" show-overflow-tooltip sortable></el-table-column>
                        <el-table-column
                            prop="chbBpsign"
                            label="收支标志"
                            align="center"
                            width="110px"
                            show-overflow-tooltip
                            sortable
                        ></el-table-column>
                        <el-table-column prop="chbTotal" label="总金额" show-overflow-tooltip sortable></el-table-column>
                        <el-table-column
                            prop="chbCurrency"
                            label="币种"
                            show-overflow-tooltip
                            sortable
                        ></el-table-column>
                        <el-table-column
                            prop="chbCheckno"
                            label="支票号"
                            show-overflow-tooltip
                            sortable
                        ></el-table-column>
                        <el-table-column
                            prop="chbSettlemode"
                            label="结算方式"
                            width="110px"
                            show-overflow-tooltip
                            sortable
                        ></el-table-column>
                        <el-table-column prop="tayNo" label="订单数" show-overflow-tooltip sortable></el-table-column>
                        <el-table-column
                            prop="chbLstupduser"
                            label="最后修改员工"
                            width="130px"
                            show-overflow-tooltip
                            sortable
                        ></el-table-column>
                        <el-table-column
                            prop="chbLstupddt"
                            label="最后修改时间"
                            width="130px"
                            show-overflow-tooltip
                            sortable
                        ></el-table-column>
                    </el-table>
                </div>
                <!-- 分页 -->
                <div class="block">
                    <el-pagination
                        ref="pagination"
                        small
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="Pagination.currentPage"
                        :page-sizes="Pagination.pageSizeList"
                        :page-size="Pagination.pageSize"
                        :layout="Pagination.layout"
                        :total="Pagination.total"
                    ></el-pagination>
                </div>
            </div>
            <!-- 右侧 订单列表 表格 -->
            <div class="openOrderRight">
                <div
                    class="openLeftTitle"
                    style="padding:20px 0 0 0;margin-bottom: 30px;height: 34px"
                >订单列表</div>
                <div class="openRightTableBox">
                    <el-table
                        :data="orderTableData"
                        border
                        :height="orderTableHeight"
                        :header-cell-style="{ textAlign: 'center' }"
                        highlight-current-row
                    >
                        <el-table-column type="index" align="center" label=" " width="50"></el-table-column>
                        <el-table-column prop="ordCode" label="订单号" show-overflow-tooltip sortable></el-table-column>
                        <el-table-column
                            prop="ordCreatetime"
                            label="创建时间"
                            show-overflow-tooltip
                            sortable
                        ></el-table-column>
                        <el-table-column
                            prop="ordCltName"
                            label="客户"
                            show-overflow-tooltip
                            sortable
                        ></el-table-column>
                        <el-table-column prop="ordStatus" label="状态" show-overflow-tooltip sortable></el-table-column>
                    </el-table>
                </div>
            </div>
        </div>

        <!-- 开账管理  选择收支弹窗 -->
        <el-dialog
            title="开账费用管理"
            :visible.sync="revenueDialog"
            width="20%"
            style="top: 20%"
            :close-on-click-modal="false"
            v-el-drag-dialog
        >
            <el-form>
                <el-form-item label="选择收支：" prop="feeDetailName">
                    <el-radio v-model="revunueRadio" label="1">收</el-radio>
                    <el-radio v-model="revunueRadio" label="2">支</el-radio>
                </el-form-item>
                <el-form-item style="text-align: center">
                    <el-button size="mini" type="primary" @click="sureRevunue">确定</el-button>
                    <el-button size="mini" type="primary" @click="revenueDialog = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 应付费用管理弹窗 -->
        <el-dialog
            :title="feeManageTitle"
            :visible.sync="feeManageDialog"
            width="80%"
            style="top: -80px"
            @close="feeManageClose"
            :close-on-click-modal="false"
            v-el-drag-dialog
        >
            <div class="feeManageBox">
                <!-- 客户 -->
                <div class="feeManageTop" v-if="isCustomer">
                    <div class="dialogTitle">客户信息</div>
                    <!-- 客户查询 -->
                    <div class="customerBox">
                        <el-form ref="customerForm" :model="customerForm" size="mini">
                            <el-row>
                                <el-col :span="22">
                                    <el-form-item label="客户：" prop="customer">
                                        <el-select
                                            v-model="customerForm.customer"
                                            filterable
                                            clearable
                                            style="width: 80%"
                                        >
                                            <el-option
                                                v-for="item in customerList"
                                                :key="item.cltId"
                                                :label="item.cltName"
                                                :value="item.cltId"
                                            >
                                                <span
                                                    style="float: left;font-size: 12px;"
                                                >{{ item.cltCode }}</span>
                                                <span
                                                    style="float: right; color: #8492a6;font-size: 12px;"
                                                >{{ item.cltName }}</span>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-form-item style="text-align: center">
                                    <el-button size="mini" type="primary" @click="getSearch">查询</el-button>
                                </el-form-item>
                            </el-row>
                        </el-form>
                    </div>
                    <!-- 客户列表 -->
                    <div class="customerTable">
                        <div class="customerListTitle">客户列表</div>
                        <el-table
                            :data="customerTableData"
                            border
                            :height="customerTableHeight"
                            :header-cell-style="{ textAlign: 'center' }"
                            highlight-current-row
                            @row-click="getBotData"
                        >
                            <el-table-column type="index" align="center" label=" " width="50"></el-table-column>
                            <el-table-column
                                prop="cltCode"
                                label="客户代码"
                                show-overflow-tooltip
                                sortable
                            ></el-table-column>
                            <el-table-column
                                prop="cltName"
                                label="客户名称"
                                show-overflow-tooltip
                                sortable
                            ></el-table-column>
                            <el-table-column
                                prop="ykBumbers"
                                label="未开账订单数量"
                                show-overflow-tooltip
                                sortable
                            ></el-table-column>
                            <el-table-column
                                prop="chbTotals"
                                label="未开账金额"
                                show-overflow-tooltip
                                sortable
                            ></el-table-column>
                            <el-table-column
                                prop="ykBumber"
                                label="已开账订单数量"
                                show-overflow-tooltip
                                sortable
                            ></el-table-column>
                            <el-table-column prop="chb_Totalz" label="已开账金额" show-overflow-tooltip></el-table-column>
                        </el-table>
                    </div>
                </div>
                <!-- 供应商 -->
                <div class="feeManageTop" v-else>
                    <div class="dialogTitle">物流供应商信息</div>
                    <!-- 供应商查询 -->
                    <div class="customerBox">
                        <el-form ref="customerForm" :model="customerForm" size="mini">
                            <el-row>
                                <el-col :span="22">
                                    <el-form-item label="物流供应商：" prop="customer">
                                        <el-select
                                            v-model="customerForm.customer"
                                            filterable
                                            clearable
                                            style="width: 65%"
                                        >
                                            <el-option
                                                v-for="item in supplyPeopleList"
                                                :key="item.fltCode"
                                                :label="item.fltName"
                                                :value="item.fltId"
                                            >
                                                <span
                                                    style="float: left;font-size: 12px;"
                                                >{{ item.fltCode }}</span>
                                                <span
                                                    style="float: right; color: #8492a6;font-size: 12px;"
                                                >{{ item.fltName }}</span>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-form-item style="text-align: center">
                                    <el-button size="mini" type="primary" @click="sendSearch">查询</el-button>
                                </el-form-item>
                            </el-row>
                        </el-form>
                    </div>
                    <!-- 供应商表格 -->
                    <div class="customerTable">
                        <div class="customerListTitle">物流供应商列表</div>
                        <el-table
                            :data="applyTableData"
                            border
                            :height="applyTableHeight"
                            :header-cell-style="{ textAlign: 'center' }"
                            highlight-current-row
                            @row-click="getBotData1"
                        >
                            <el-table-column type="index" align="center" label=" " width="50"></el-table-column>
                            <el-table-column
                                prop="fltCode"
                                label="物流供应商代码"
                                show-overflow-tooltip
                                sortable
                            ></el-table-column>
                            <el-table-column
                                prop="fltName"
                                label="物流供应商名称"
                                show-overflow-tooltip
                                sortable
                            ></el-table-column>
                            <el-table-column
                                prop="ykWk"
                                label="未开账订单数量"
                                show-overflow-tooltip
                                sortable
                            ></el-table-column>
                            <el-table-column
                                prop="chbTotals"
                                label="未开账金额"
                                show-overflow-tooltip
                                sortable
                            ></el-table-column>
                            <el-table-column
                                prop="ykBumber"
                                label="已开账订单数量"
                                show-overflow-tooltip
                                sortable
                            ></el-table-column>
                            <el-table-column prop="chbTotalz" label="已开账金额" show-overflow-tooltip></el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="feeManageBot">
                    <div class="dialogTitle">开账信息</div>
                    <!-- 开账信息表单 -->
                    <div class="openBillFormBox">
                        <el-form
                            ref="openBillForm"
                            :model="openBillForm"
                            :rules="openBillRules"
                            label-width="100px"
                            :inline="true"
                            size="mini"
                        >
                            <el-row>
                                <el-col :span="6">
                                    <el-form-item label="账单号：" prop="chbBillNo">
                                        <el-input
                                            v-model="openBillForm.chbBillNo"
                                            clearable
                                            disabled
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="结算方式：" prop="chbSettlemode">
                                        <el-select
                                            v-model="openBillForm.chbSettlemode"
                                            filterable
                                            clearable
                                        >
                                            <el-option
                                                v-for="item in payStyleList"
                                                :key="item.rvLowValue"
                                                :label="item.rvCmeaning"
                                                :value="item.rvLowValue"
                                            >
                                                <span
                                                    style="float: left;font-size: 12px;"
                                                >{{ item.rvLowValue }}</span>
                                                <span
                                                    style="float: right; color: #8492a6;font-size: 12px;"
                                                >{{ item.rvCmeaning }}</span>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="支票号：" prop="checkNum">
                                        <el-input v-model="openBillForm.chbCheckno" clearable></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6" v-if="isCustomer">
                                    <el-form-item label="户名：" prop="chbJchbPaycstId">
                                        <el-select
                                            v-model="openBillForm.chbJchbPaycstId"
                                            filterable
                                            clearable
                                        >
                                            <el-option
                                                v-for="item in customerList"
                                                :key="item.cltId"
                                                :label="item.cltName"
                                                :value="item.cltId"
                                            >
                                                <span
                                                    style="float: left;font-size: 12px;"
                                                >{{ item.cltCode }}</span>
                                                <span
                                                    style="float: right; color: #8492a6;font-size: 12px;"
                                                >{{ item.cltName }}</span>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6" v-else>
                                    <el-form-item label="户名：" prop="chbJchbPaycstId">
                                        <el-select
                                            v-model="openBillForm.chbJchbPaycstId"
                                            filterable
                                            clearable
                                        >
                                            <el-option
                                                v-for="item in supplyPeopleList"
                                                :key="item.fltId"
                                                :label="item.fltName"
                                                :value="item.fltId"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6">
                                    <el-form-item label="开户行：" prop="openBand">
                                        <el-input v-model="openBillForm.openBand" clearable></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="银行账号：" prop="bandAccount">
                                        <el-input v-model="openBillForm.bandAccount" clearable></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="税号：" prop="chbTax">
                                        <el-input v-model="openBillForm.chbTax" clearable></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="地址：" prop="chbAddress">
                                        <el-input v-model="openBillForm.chbAddress" clearable></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6">
                                    <el-form-item label="联系电话：" prop="connectPhone">
                                        <el-input v-model="openBillForm.connectPhone" clearable></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="备注：" prop="chbRemark">
                                        <el-input v-model="openBillForm.chbRemark" clearable></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="收支标志：" prop="chbBpsign">
                                        <el-select
                                            v-model="openBillForm.chbBpsign"
                                            filterable
                                            clearable
                                            disabled
                                        >
                                            <el-option
                                                v-for="item in getPayStatuList"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>
                    <div class="botTableBox">
                        <!-- 左侧 订单列表 表格 -->
                        <div class="tableBoxLeft">
                            <div class="tableLeftTitle">订单列表</div>
                            <el-table
                                :data="orderListTableData"
                                border
                                :height="orderListTableHeight"
                                @selection-change="handleSelectionChange"
                                :header-cell-style="{ textAlign: 'center' }"
                                highlight-current-row
                                @row-click="getOrderCurrentData"
                            >
                                <el-table-column type="index" align="center" label=" " width="50"></el-table-column>
                                <el-table-column type="selection" width="55"></el-table-column>
                                <el-table-column prop="ordCode" label="订单号" show-overflow-tooltip></el-table-column>
                                <el-table-column
                                    prop="ordCreatetime"
                                    label="创建时间"
                                    show-overflow-tooltip
                                ></el-table-column>
                                <el-table-column prop="cltName" label="客户" show-overflow-tooltip></el-table-column>
                                <el-table-column prop="ordStatus" label="状态" show-overflow-tooltip></el-table-column>
                                <el-table-column prop="ordYf" label="未开账金额" show-overflow-tooltip></el-table-column>
                                <el-table-column
                                    prop="postIngManage"
                                    label="是否已开账"
                                    show-overflow-tooltip
                                ></el-table-column>
                            </el-table>
                        </div>
                        <!-- 右侧 开账费用列表 表格 -->
                        <div class="tableBoxRight">
                            <div class="tableRightTitle">开账费用列表</div>
                            <el-table
                                :data="openFeeListTableData"
                                border
                                :height="openFeeListTableHeight"
                                :header-cell-style="{ textAlign: 'center' }"
                                highlight-current-row
                            >
                                <el-table-column type="index" align="center" label=" " width="50"></el-table-column>
                                <el-table-column prop="msiBill" label="费目" show-overflow-tooltip></el-table-column>
                                <el-table-column
                                    prop="msiUnit"
                                    label="计价单位"
                                    width="120px"
                                    show-overflow-tooltip
                                ></el-table-column>
                                <el-table-column prop="msiCamt" label="数量" show-overflow-tooltip></el-table-column>
                                <el-table-column prop="msiPrice" label="单价" show-overflow-tooltip></el-table-column>
                                <el-table-column prop="money" label="金额" show-overflow-tooltip></el-table-column>
                                <el-table-column
                                    prop="msiCurrency"
                                    label="币种"
                                    show-overflow-tooltip
                                ></el-table-column>
                            </el-table>
                        </div>
                    </div>
                    <div class="btnBox">
                        <el-button @click="feeManageDialog = false" size="mini">关闭</el-button>
                        <el-button type="primary" @click="shouSave" size="mini">保存</el-button>
                    </div>
                </div>
            </div>
        </el-dialog>

        <!-- 账单打印弹窗 -->
        <el-dialog
            title="编辑备注"
            :visible.sync="billPrintDialog"
            width="30%"
            :close-on-click-modal="false"
            v-el-drag-dialog
        >
            <div class="printBox">
                <span>备注：</span>
                <el-input type="textarea" v-model="printNote" style="width: 90%"></el-input>
            </div>

            <div class="printBtnBox">
                <el-button @click="billPrintDialog = false" size="mini">关闭</el-button>
                <el-button type="primary" @click="printSave" size="mini">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import paginationMixin from '@/mixins/pagination'
import {
  payPeopleService,
  getBillListService,
  getOrderListService,
  clientService,
  getAccountListService,
  getSelectDown,
  getApplyService,
  getBotDataService,
  getOpenFeeListService,
  openBillSaveService,
  delOpenBillService,
  getCustomerService,
  getBandService
} from '@/request/api'
export default {
  name: 'router.openOrderManage',
  mixins: [paginationMixin],
  data() {
    return {
      searchForm: {
        billNum: '', // 账单号
        payPeople: '' // 支付人
      },
      payPeopleList: [], // 支付人  下拉框数据
      payStyleList: [], // 结算方式  下拉框数据
      customerList: [], // 客户  下拉框数据
      supplyPeopleList: [], // 供应商  下拉框数据
      billTableData: [], // 账单列表 表格数据
      billTableHeight: 660, // 账单列表 表格高度
      orderTableData: [], // 订单列表 表格数据
      orderTableHeight: 660, // 订单列表 表格高度
      revenueDialog: false, // 判断收支弹窗
      revunueRadio: '1', // 判断 收支
      billCurrentData: '', // 账单列表当前行数据

      // 费用管理弹窗
      isCustomer: false, // 判断是收 还是 支
      feeManageTitle: '', // 标题
      feeManageDialog: false, // 控制费用管理弹窗是否展示
      customerForm: {
        customer: '' // 客户
      },
      customerTableData: [], // 客户列表 表格数据
      customerTableHeight: 175, // 客户列表 表格高度
      applyTableData: [], // 供应商 表格数据
      applyTableHeight: 175, // 供应商 表格高度
      // 开账信息
      openBillForm: {
        chbBillNo: '', // 账单号
        chbSettlemode: '', // 结算方式
        checkNum: '', // 支票号
        chbJchbPaycstId: '', // 户名
        openBand: '', // 开户行
        bandAccount: '', // 银行账号
        chbTax: '', // 税号
        chbAddress: '', // 地址
        connectPhone: '', // 联系电话
        chbRemark: '', // 备注
        chbBpsign: '' // 收支标志
      },
      openBillRules: {
        chbBillNo: [
          { required: true, message: '账单号不能为空', trigger: 'blur' }
        ],
        chbSettlemode: [
          { required: true, message: '结算方式不能为空', trigger: 'blur' }
        ],
        chbJchbPaycstId: [
          { required: true, message: '户名不能为空', trigger: 'blur' }
        ],
        chbBpsign: [
          { required: true, message: '收支标志不能为空', trigger: 'blur' }
        ]
      },
      orderListTableData: [], // 订单列表 表格数据
      orderListTableHeight: 190, // 订单列表 表格高度
      openFeeListTableData: [], // 开账费用列表 表格数据
      openFeeListTableHeight: 190, // 开账费用列表 表格高度

      // 账单打印弹窗
      billPrintDialog: false, // 控制账单打印
      printNote: '', // 备注

      // 下拉框数据
      getPayStatuList: [
        { label: '收入', value: 'IF' },
        { label: '支出', value: 'EF' }
      ], // 收支标志
      dialogTopCurrentData: '', // 弹窗内  上方表格  当前行数据
      multipleSelection: [] // 选中的表格数据
    }
  },
  mounted() {
    this.getSelectData()
    this.getList()
  },
  methods: {
    // 顶部搜索按钮
    searchBtn() {
      this.getList()
    },
    // 账单列表  查询
    getList() {
      getBillListService(this.searchForm).then(res => {
        if (res.success == 1) {
          this.billTableData = res.data.FTKJWLHYPT
          this.Pagination.total = res.data.total.FTKJWLHYPT
        }
      })
    },
    // 开账管理
    openManage() {
      this.revenueDialog = true
    },
    // 取消开账
    delOpen() {
      if (Object.keys(this.billCurrentData).length == 0) {
        this.$alert('请选择一条需要取消开账的数据', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.$confirm('您确认要删除选定的数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delOpenBillService({ chbId: this.billCurrentData.chbId }).then(
            res => {
              if (res.success == 1) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
                this.getList()
              }
            }
          )
        })
        .catch(() => {})
    },
    // 账单打印
    printBill() {
      this.billPrintDialog = true
    },
    // 判断选择收支弹窗  确定按钮
    sureRevunue() {
      if (this.revunueRadio == 1) {
        this.revenueDialog = false
        this.isCustomer = true
        this.openBillForm.chbBpsign = 'IF'
        this.feeManageTitle = '应收费用管理'
        this.feeManageDialog = true
        this.getClientListData()
      } else {
        this.revenueDialog = false
        this.isCustomer = false
        this.openBillForm.chbBpsign = 'EF'
        this.feeManageTitle = '应付费用管理'
        this.feeManageDialog = true
      }
    },
    // 开账费用管理 收弹窗  保存按钮
    shouSave() {
      if (this.feeManageTitle == '应收费用管理') {
        if (this.openBillForm.chbSettlemode == '') {
          this.$alert('结算方式不能为空', '提示', {
            confirmButtonText: '确定'
          })
          return
        }
        if (this.openBillForm.chbJchbPaycstId == '') {
          this.$alert('户名不能为空', '提示', {
            confirmButtonText: '确定'
          })
          return
        }

        if (this.multipleSelection.length > 0) {
          let newArr = []
          this.multipleSelection.forEach(item => {
            newArr.push(item.ordId)
          })
          let newStr = ''
          newStr = newArr.join(',')
          let needData = Object.assign(
            this.openBillForm,
            { ordId: newStr },
            { chbPaycstId: this.dialogTopCurrentData.cltId },
            { chbPayer: this.dialogTopCurrentData.cltName }
          )
          openBillSaveService(needData).then(res => {
            if (res.success == 1) {
              this.$message({
                type: 'success',
                message: '保存成功'
              })
              this.feeManageDialog = false
              this.getList()
            }
          })
        } else {
          this.$message.error('请选择一个订单')
        }
      } else if (this.feeManageTitle == '应付费用管理') {
        if (this.openBillForm.chbSettlemode == '') {
          this.$alert('结算方式不能为空', '提示', {
            confirmButtonText: '确定'
          })
          return
        }
        if (this.openBillForm.chbJchbPaycstId == '') {
          this.$alert('户名不能为空', '提示', {
            confirmButtonText: '确定'
          })
          return
        }
        if (this.multipleSelection.length > 0) {
          let newArr = []
          this.multipleSelection.forEach(item => {
            newArr.push(item.ordId)
          })
          let newStr = ''
          newStr = newArr.join(',')
          let needData = Object.assign(
            this.openBillForm,
            { ordId: newStr },
            { chbPayer: this.dialogTopCurrentData.cltName }
          )
          openBillSaveService(needData).then(res => {
            if (res.success == 1) {
              this.$message({
                type: 'success',
                message: '保存成功'
              })
              this.feeManageDialog = false
              this.getList()
            }
          })
        } else {
          this.$message.error('请选择一个订单')
        }
      }
    },
    // 开账费用管理 收弹窗  查询按钮
    getSearch() {
      // 调用查询接口
      this.getAccountTableData()
    },
    // 开账费用管理 支弹窗  查询按钮
    sendSearch() {
      getCustomerService(this.customerForm.customer).then(res => {
        if (res.success == 1) {
          this.applyTableData = res.data.FTKJWLHYPT
        }
      })
    },
    // 获取账单列表当前行
    getBillCurrent(row) {
      this.billCurrentData = row
      console.log(this.billCurrentData)
      this.getOrderListData()
    },
    // 获取  订单列表  表格数据
    getOrderListData() {
      getOrderListService({ cbmChbId: this.billCurrentData.chbId }).then(
        res => {
          if (res.success == 1) {
            this.orderTableData = res.data.FTKJWLHYPT
          }
        }
      )
    },
    // 获取  客户  下拉列表
    getClientListData() {
      clientService().then(res => {
        if (res.success == 1) {
          this.customerList = res.data
        }
      })
    },
    // 获取  客户  列表数据
    getAccountTableData() {
      getAccountListService(this.customerForm.customer).then(res => {
        if (res.success == 1) {
          this.customerTableData = res.data.FTKJWLHYPT
        }
      })
    },
    // 账单打印 弹窗 保存
    printSave() {},
    // 获取下拉框接口
    getSelectData() {
      payPeopleService().then(res => {
        if (res.success == 1) {
          this.payPeopleList = res.data.FTKJWLHYPT
        }
      })
      // 结算方式
      getSelectDown({ rvDomain: '结算方式' }).then(res => {
        if (res.success == 1) {
          this.payStyleList = res.data.FTKJWLHYPT
        }
      })
      // 供应商
      getApplyService().then(res => {
        if (res.success == 1) {
          this.supplyPeopleList = res.data.FTKJWLHYPT
        }
      })
    },
    // 监听费用管理弹窗关闭事件
    feeManageClose() {
      this.$refs.customerForm.resetFields()
      this.$refs.openBillForm.resetFields()
      this.customerTableData = []
      this.orderListTableData = []
      this.openFeeListTableData = []
    },
    // 获取  弹窗 客户列表  当前行数据
    getBotData(row) {
      this.dialogTopCurrentData = row
      console.log(this.dialogTopCurrentData)
      this.openBillForm.chbJchbPaycstId = row.cltId

      getBotDataService({ msiBpsign: 'IF', ordCltId: row.cltId }).then(res => {
        if (res.success == 1) {
          this.orderListTableData = res.data.FTKJWLHYPT
        }
      })
      getBandService({ cltId: row.cltId }).then(res => {
        if (res.success == 1) {
          this.openBillForm.bandAccount = res.data.FTKJWLHYPT[0].cltAccount
          this.openBillForm.chbTax = res.data.FTKJWLHYPT[0].cltTaxno
          this.openBillForm.openBand = res.data.FTKJWLHYPT[0].cltBankno
          this.openBillForm.chbAddress = res.data.FTKJWLHYPT[0].cltAddress
          this.openBillForm.connectPhone = res.data.FTKJWLHYPT[0].cltCtctel
        }
      })
    },
    // 获取  弹窗 供应商  当前行数据
    getBotData1(row) {
      this.dialogTopCurrentData = row
      console.log(this.dialogTopCurrentData)
      this.openBillForm.chbJchbPaycstId = row.fltId
      getBotDataService({ msiBpsign: 'EF', mslJchbPaycstid: row.fltId }).then(
        res => {
          if (res.success == 1) {
            this.orderListTableData = res.data.FTKJWLHYPT
          }
        }
      )
    },
    // 获取  弹窗  订单列表  当前行
    getOrderCurrentData(row) {
      getOpenFeeListService({ ordId: row.ordId }).then(res => {
        if (res.success == 1) {
          this.openFeeListTableData = res.data.FTKJWLHYPT
        }
        console.log(res)
      })
    },
    // 监听表格选中事件
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>

<style lang="scss" scoped>
.openOrder {
    .openOrderTop {
        padding: 10px;
        padding-bottom: 0;
    }
    .openOrderBox {
        height: 100%;
        width: 100%;
        padding: 0 5px;
        display: flex;
        justify-content: space-between;
        .openOrderLeft {
            width: 64%;
            height: 768px;
            .openLeftBtnBox {
                padding-left: 15px;
                padding-bottom: 10px;
            }
            .block {
                padding-top: 10px;
            }
        }
        .openOrderRight {
            width: 35%;
            height: 768px;
        }
    }
}

// 弹窗样式
.feeManageBox {
    width: 100%;
    height: 700px;
    border: 1px solid #ccc;
    position: relative;
    padding: 0 5px;
    padding-top: 20px;
    .feeManageTop {
        width: 100%;
        height: 200px;
        border: 1px solid #ccc;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .customerBox {
            padding-top: 20px;
            width: 30%;
            height: 100%;
        }
        .customerTable {
            width: 69%;
            height: 100%;
            .customerListTitle {
                font-weight: bold;
            }
        }
    }
    .feeManageBot {
        width: 100%;
        height: 450px;
        border: 1px solid #ccc;
        position: relative;
        margin-top: 20px;
        .openBillFormBox {
            padding-top: 20px;
        }
        .botTableBox {
            width: 100%;
            height: 240px;
            border: 1px solid #ccc;
            display: flex;
            justify-content: space-between;
            .tableBoxLeft {
                width: 60%;
                height: 100%;
                .tableLeftTitle {
                    font-weight: bold;
                    padding: 5px 0;
                }
            }
            .tableBoxRight {
                width: 39%;
                height: 100%;
                .tableRightTitle {
                    font-weight: bold;
                    padding: 5px 0;
                }
            }
        }
        .btnBox {
            padding-top: 15px;
            padding-right: 20px;
            text-align: right;
        }
    }
}

.openLeftTitle {
    font-weight: bold;
    padding-left: 10px;
    margin-bottom: 10px;
}
.dialogTitle {
    font-weight: bold;
    position: absolute;
    top: -12px;
    background-color: #fff;
}
.printBox {
    display: flex;
    justify-content: space-between;
}
.printBtnBox {
    padding-top: 10px;
    text-align: right;
}
</style>

